<?php
require_once('../libraryfiles/config.php');
$number = $_GET['number'];
$numberTop = mysql_query("SELECT * FROM ".Tblrefcode::tblname." WHERE " . Tblrefcode::name . " = 'top_province' AND ".Tblrefcode::type." = 'global_setting' LIMIT " . $number);
$top = mysql_fetch_object($numberTop);
$query = mysql_query("SELECT " . Tblproduct::province_id . " , COUNT(*) AS productAmounce FROM " . Tblproduct::tblproduct . " GROUP BY " . Tblproduct::province_id . " ORDER BY productAmounce DESC lIMIT " . ($number + 1) . " ");
$topProvinices = array();
while($provinceList = mysql_fetch_object($query)){
	$provinceQuery = mysql_query("SELECT * FROM  " . Tblprovince::tblprovince . " WHERE " . Tblprovince::id . " = " . $provinceList->{Tblproduct::province_id}. " ");
	if($provinceQuery){
		while($provinceObject = mysql_fetch_assoc($provinceQuery)){
			$provinceData[] = $provinceList->productAmounce;
			$provinceNames[] = $provinceObject[Tblprovince::name];
		}
	}
}
if(!empty($provinceData)){
$provinceData = implode(',', $provinceData);
$provinceNames = implode(',', $provinceNames);
}
echo '<input type="hidden" id="provinceName" value="'. @$provinceNames . '" />';
echo '<input type="hidden" id="provinceData" value="'. @$provinceData . '" />';
?>
<script type="text/javascript">
$(function () {
		var provinceName = $('#provinceName').val().split(',');
		var provinceData = $('#provinceData').val().split(',');
		// convert array string to array integer
		var amoucne = provinceData.length;
		for ( var i = 0; i < amoucne; i ++) {
			provinceData[i] = parseInt(provinceData[i])
		}
		$('#report').highcharts({
			chart: {
				type: 'column',
				margin: [ 50, 50, 100, 80] 
			},
			title: {
				text: 'Popular Provinces'
			},
			xAxis: {
				categories: provinceName,
				labels: {
					rotation: -45,
					align: 'right',
					style: {
						fontSize: '13px',
						fontFamily: 'Verdana, sans-serif'
					}
				}
			},
			yAxis: {
				min: 0,
				title: {
					text: 'Product (amounce)'
				}
			},
			legend: {
				enabled: false
			},
			tooltip: {
				pointFormat: 'product amounce <b>{point.y:.1f} </b>',
			},
			series: [{
				name: 'Province',
				data: provinceData,
				dataLabels: {
					enabled: true,
					rotation: -90,
					color: '#FFFFFF',
					align: 'right',
					x: 4,
					y: 10,
					style: {
						fontSize: '13px',
						fontFamily: 'Verdana, sans-serif',
						textShadow: '0 0 3px black'
					}
				}
			}]
		});
	});
</script>
<div id="report" style="width: 100%; height: 300px; margin: 0 auto"></div>